import axios from 'axios'
import './Cars.css'
import { useEffect, useState } from 'react'
import { Stepper } from 'react-vant'
import { useRef } from 'react'
import { useNavigate } from 'react-router-dom'
export default function Cars() {
  let inp = useRef(null)
  let navigate = useNavigate()
  const [cars, setcars] = useState([])
  const [text, settext] = useState('结算')
  const [ids, setids] = useState([])
  const countarr = () => {
    let count = 0
    cars.forEach(item => {
      if (item.is_collect) {
        count += item.price * item.num
      }
    })
    return count
  }
  const getcars = async () => {
    let { data } = await axios.get('http://127.0.0.1:3000/cars')
    setcars(data.data)
    let arr = data.data.filter(item => item.is_collect)
    let arr1 = []
    if (data.data.length == arr.length) {
      inp.current.checked = true
    } else {
      inp.current.checked = false
    }
    arr.forEach(item => {

      arr1.push(item._id)

    })
    setids(arr1)

  }
  useEffect(() => {
    getcars().then(() => {

    })

  }, [])
  return (
    <div  >

      <div style={{ width: '100vw', height: '100vh', backgroundSize: ' 100% 100% cover', backgroundRepeat: 'no-repeat', backgroundColor: '#ededed' }}>
        <div className='cars_nav'> <span className='nav_1'>购物车({cars.length})</span> <span className='nav_2'> 🔍  </span> &emsp;<span className='nav_3' onClick={() => {
          if (text == '结算') {
            settext('删除')
          } else {
            settext('结算')
          }
        }}>{text == '结算' ? '编辑' : <button style={{ background: 'red', color: 'white', border: '0px', width: '15vw', height: '5vh' }}>完成</button>}</span></div>
        <div>
          {cars.map(item => {
            return <div className='cars_kuai' key={item._id}>
              <div className='cars_kuai1'>
                <span><input type="checkbox" checked={item.is_collect} onChange={async () => {

                  let { data } = await axios.put('http://127.0.0.1:3000/carsup?id=' + item._id + '&lo=' + item.is_collect)
                  getcars()

                }} /></span>
                <span><img src={'/img/' + item.imgsrc} alt="" /></span></div>
              <div className='cars_kuai2'>

                <div>{item.name}</div>
                <div>AO8010-100 41</div>
                <div style={{ display: 'flex' }}><span>￥{item.price}</span><span > &emsp; &emsp; &emsp;<Stepper
                  defaultValue={item.sale}
                  min={1}
                  buttonSize={20}
                  onChange={async (value) => {
                    let { data } = await axios.put('http://127.0.0.1:3000/carsnum?id=' + item._id + '&num=' + value)
                    getcars()

                  }}
                /></span></div>
              </div>
            </div>
          })}
        </div>
        <div style={{ position: 'fixed', bottom: '5vh', background: 'white', lineHeight: '6vh' }} className='cars_action'><span><input type="checkbox" onChange={async (event) => {
          let { data } = await axios.put('http://127.0.0.1:3000/ups?lo=' + event.target.checked)
          getcars()
        }} ref={inp} />全选</span><span>合计<span style={{ color: 'red', fontSize: '20px' }}>￥{countarr()


        }</span></span><span><button style={{ background: 'red', width: '28vw', textAlign: 'center', border: '0px', color: 'white', fontWeight: 'bold' }} onClick={async () => {
          if (text == '删除') {
            let { data } = await axios.delete('http://127.0.0.1:3000/carsdel?id=' + ids)
            if (data.code == 200) {
              getcars()
            }
          } else {
            navigate('/buy')
          }
        }}>{text}</button></span></div>

      </div>

    </div>
  )
}
